<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="后台管理系统">
    <meta name="description" content="">

    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/plugins/layui_v2/css/layui.css">
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" type="text/css" href="/css/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="/css/personal.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_9h680jcse4620529.css">
    <script src="/plugins/layui_v2/layui.js"></script>

<body>
<div class="larry-grid layui-anim layui-anim-upbit larryTheme-A ">
    <div class="larry-personal">
        <div class="layui-tab">
            <blockquote class="layui-elem-quote mylog-info-tit">
                <div class="layui-inline">
                    <!--<form class="layui-form" id="userSearchForm">
                        <div class="layui-input-inline" style="width:110px;">
                            <select name="searchTerm" >
                                <option value="username">用户名</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:145px;">
                            <input type="text" name="search" value="" placeholder="请输入关键字" class="layui-input search_input">
                        </div>
                        <a class="layui-btn userSearchList_btn" lay-submit lay-filter="userSearch"><i class="layui-icon larry-icon larry-chaxun7"></i>查询</a>
                    </form>-->
                </div>
                <!--<div class="layui-inline">
                    <a class="layui-btn layui-btn-normal excelUserExport_btn"  style="background-color:#5FB878"> <i class="layui-icon larry-icon larry-danye"></i>导出</a>
                </div>-->
            </blockquote>
            <div class="larry-separate"></div>
            <!-- 在线用户列表 -->
            <div class="layui-tab-item layui-show " style="padding: 10px 15px;">
                <table id="onlineTableList"  lay-filter="onlineTableId" ></table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var $;
    layui.config({
        base : "/js/"
    }).use(['form', 'table', 'layer','common'], function () {
         $ =  layui.$;
                var form = layui.form,
                table = layui.table,
                layer = layui.layer,
                common = layui.common;

        var loading = layer.load(0,{ shade: [0.3,'#000']});
        /**在线用户表格加载*/
        table.render({
            elem: '#onlineTableList',
            url: '/sys/user/onlineAjax',
            id:'onlineTableId',
            method: 'get',
            height:'full-140',
            skin:'row',
            even:'true',
            size: 'sm',
            curr: 1,
            cols: [[
                {type:"numbers"},
                {type:"checkbox"},
                {field:'username', title: '用户名',align:'center', width: '12%'},
                {field:'host', title: '主机',align:'center', width: '12%'},
                {field:'sessionId', title: 'sessionId',align:'center' },
                {field:'sessionStatus', title: '状态',align:'center',width: '5%',templet: '#statusTpl'},
                {field:'startTime', title: '创建时间',align:'center',width: '12%'},
                {field:'lastAccess', title: '修改时间',align:'center',width: '12%'},
                {title: '操作', align:'center', width: '10%',toolbar: '#userBar'}
            ]],
            page: true,
            done: function (res, curr, count) {
                common.resizeGrid();
                layer.close(loading);
                var sessionStatus = '${user.sessionStatus}';
                console.log();
            }
        });

        /**查询*/
        $(".userSearchList_btn").click(function(){
            var loading = layer.load(0,{ shade: [0.3,'#000']});
            //监听提交
            form.on('submit(userSearchFilter)', function (data) {
                table.reload('onlineTableId',{
                    where: {
                            searchTerm:data.field.searchTerm,
                            searchContent:data.field.searchContent
                    },
                    height: 'full-140',
                    page: true,
                    done: function (res, curr, count) {
                        common.resizeGrid();
                        layer.close(loading);

                    }
                });
            });
        });

        /**批量踢出*/
        $(".userBatchFail_btn").click(function(){

            //表格行操作
            var checkStatus = table.checkStatus('onlineTableId');
            if(checkStatus.data.length == 0){
                common.cmsLayErrorMsg("请选择要踢出的用户信息");
            }else{
                var isCreateBy = false;
                var sessionStatus = false;
                var currentUserName = '${user.id}';
                var ids = [];

                $(checkStatus.data).each(function(index,item){
                    ids.push(item.id);
                    //不能踢出当前登录用户
                    if(currentUserName != item.id){
                        isCreateBy = true;
                    }else{
                        isCreateBy = false;
                        return false;
                    }
                    //用户已踢出
                    if(item.sessionStatus == 0){
                        sessionStatus = false;
                    }else{
                        sessionStatus = true;
                        return false;
                    }

                });

                if(isCreateBy==false){
                    common.cmsLayErrorMsg("当前登录用户不能被踢出,请重新选择");
                    return false;
                }
                if(sessionStatus==false){
                    common.cmsLayErrorMsg("当前选择的用户已踢出");
                    return false;
                }

                var url = "/sys/user/failOnline";
                var param = {ids:ids};
                common.ajaxCmsConfirm('系统提示', '确定踢出当前用户吗?', url, param);

            }

        });

        /**监听工具条*/
        table.on('tool(onlineTableId)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            console.log(data);
            //修改用户
            if (layEvent === 'user_edit') {
                var id = data.id;
                var url =  "/sys/user/edit/"+id;
                common.cmsLayOpen('编辑用户',url,'550px','265px');

            //分配角色
            } else if(layEvent === 'user_grant'){
                var id = data.id;
                var sessionStatus = data.sessionStatus;
                if(sessionStatus == 0){
                    common.cmsLayErrorMsg("当前用户已踢出,不能被分配角色");
                    return false;
                }
                var url =  "/sys/user/grant/"+id;
                common.cmsLayOpen('分配角色',url,'500px','440px');

            //用户踢出
            } else if(layEvent === 'user_fail') {
                var id = data.id;
                var sessionStatus = data.sessionStatus;
                var currentUserId = '${LOGIN_NAME.id}';/*当前登录用户的ID*/
                if(sessionStatus == 1){
                    common.cmsLayErrorMsg("当前用户已踢出");
                    return false;
                }
                if(id == currentUserId){
                    common.cmsLayErrorMsg("当前登陆用户不能被踢出");
                    return false;
                }

                var url = "/sys/user/failOnline";
                var param = {id:id};
                common.ajaxCmsConfirm('系统提示', '确定踢出用户吗?',url,param);

            }
        });


    });
</script>

<!-- 用户状态tpl-->
<script type="text/html" id="statusTpl">

    {{# if(d.sessionStatus == false){ }}
    <span class="label label-success ">在线</span>
    {{# } else if(d.sessionStatus == true){ }}
    <span class="label label-danger ">离线</span>
    {{# } else { }}
    {{d.sessionStatus}}
    {{# }  }}
</script>

<!--工具条 -->
<script type="text/html" id="userBar">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs layui-btn-danger user_fail" lay-event="user_fail"><i class="layui-icon larry-icon larry-ttpodicon"></i> 踢出</a>
    </div>
</script>

</body>
</html>